<template>
<div>
    <el-table
            :data="admin"
            style="width: 100%">
        <el-table-column
                label="账号"
                width="180">
            <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                    <p>姓名: {{ scope.row.adminUsername }}</p>
                    <p>权限: {{ scope.row.adminRoles.adminRolesname }}</p>
                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">
                            {{ scope.row.adminUsername }}</el-tag>
                    </div>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column
            label="权限"
            width="180">
            <template slot-scope="scope">

                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.adminRoles.adminRolesname }}</el-tag>
                    </div>

            </template>
        </el-table-column>
        <el-table-column label="操作" v-if="adminname.roleId===1">
            <template slot-scope="scope" >
<!--                <el-button-->
<!--                        size="mini"-->
<!--                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
                <router-link :to="{name:'管理员添加',query:{id:scope.row.id}}">  <el-button size="mini">编辑</el-button></router-link>
                <el-button
                        size="mini"
                        type="danger"
                        v-if="scope.row.state"
                        @click="handleDelete(scope.row.id, scope.row)">禁用
                </el-button>
                <el-button
                        size="mini"
                        type="success"
                        v-else
                        @click="handleDelete(scope.row.id, scope.row)">启用
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage1"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total">
    </el-pagination>

  </div>

</template>
<script>
export default {
  data() {
    return {
        admin:[],
        total:'',
        pageSize:'',
        adminname: {}
    }
  },
    created() {
      this.adminname = JSON.parse(window.localStorage.getItem("admin"));
      this.handleAdmin();
    },
    methods: {
    onSubmit() {
      console.log('submit!');
    },
      handleAdmin(){
        this.$axios.get("manage/adminpagelist",{params: {pageNum:"1",pageSize:"5"}})
            .then(res=>{
                this.admin=res.data.adminPage.records
                this.total=res.data.adminPage.total
                this.pageSize=res.data.adminPage.size
            })

      },//编辑
            handleEdit(index, row) {
                console.log(index, row);
            },//删除
            handleDelete(index, row) {
                this.$axios.post("manage/deleteAdmin",row).then(res=>{
                    alert(res.data.msg);
                    this.handleAdmin();
                })
                console.log(index, row);
            },
        handleCurrentChange(val) {
            this.$axios.get("manage/adminpagelist",{params: {pageNum:val,pageSize:this.pageSize}})
                .then(res=>{
                    this.admin=res.data.adminPage.records
                })
        }

  }
}
</script>


<style scoped>

</style>